import React, { useEffect, useState } from 'react'
import { NavBar, IndexBar, SearchBar, List,Tag } from 'antd-mobile'
import { citylb, cityss } from './request/api'
import Mylodash from './hook/Mylodash'
import { useSelector, useDispatch } from 'react-redux'
import { addcity } from './store/cityslice'
function App() {
  let [city, setcity] = useState([])
  let [sscity, setsscity] = useState([])
  let [hotcity, sethotcity] = useState([])
   const dispatch = useDispatch()
    const {mycity} = useSelector(state => state.cityslice)
    console.log('mycity',mycity)

  // 城市
  useEffect(() => {
    citylb().then(res => {
      console.log('city', res)
      if (res.data.code == 200) {
        setcity(res.data.data.city)
        sethotcity(res.data.data.hotCities)
      }
    })
  }, [])
  // 搜索城市
  let ss = Mylodash((wd) => {
    console.log('val', wd)
    cityss(wd).then(res => {
      console.log('ss', res)
      if (res.data.code == 200) {
        setsscity(res.data.data)
      }
       if(wd==''){
      setsscity([])
    }
    })
   
  }, 1000)
  // 点击城市，存到仓库
  let dian=(item)=>{
      dispatch(addcity(item))
  }
  return (
    <div style={{background:'#eee'}}>
      <NavBar style={{ background: ' #0fb8d1ff' }}> <SearchBar placeholder='城市.车站的中文或拼音'
        onChange={val => ss(val)} clearable /></NavBar>
        {/* 热门城市 */}
        <div style={{ display: sscity.length > 0 ? 'none' : 'block' ,}}>
            <div style={{margin:'10px'}}>
          <p>热门城市</p>
          {
            hotcity.length>0&& hotcity.map((item,index)=>{
              return  <Tag onClick={()=>dian(item.name)}  key={index} color='#fff' style={{color:'#000',width:'35px',marginRight:'10px',marginTop:'10px'}}>{item.name}</Tag>
            })
          }
        </div>
        {/* 城市 */}
      <div style={{ height: window.innerHeight,margin:'10px'}}>
        <IndexBar>
          {city.length > 0 && city.map((item, index) => {
            return (
              <IndexBar.Panel
                index={item.initial}
                title={`标题${item.initial}`}
                key={`标题${item.initial}`}
              >
                <List>
                  {item.list.map((item, index) => (
                    <List.Item onClick={()=>dian(item.name)} key={index}>{item.name}</List.Item>
                  ))}
                </List>
              </IndexBar.Panel>
            )
          })}
        </IndexBar>


      </div>
        </div>
      
      {/* 搜索城市 */}
      <List>
        {sscity.length > 0 && sscity.map((item, index) => (
          <List.Item onClick={()=>dian(item.name)} key={index}>{item.name}</List.Item>
        ))}
      </List>
    </div>
  )
}

export default App
